<!--
 * @Description: 天气组件
 * @Autor: WangYuan
 * @Date: 2021-06-04 15:37:07
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-01-08 14:47:27
-->
<template>
  <view class="title">
    <view class="pt10 pb10" :style="[getWrapStyle()]">
      <view class="title" :style="[titleStyle()]">
        {{ value.name || "" }}
      </view>
      
    </view>
  </view>
</template>

<script>
export default {
  name: "McWeather",

  props: {
    styles: {
      type: Object,
      default: () => {}
    },
    attrs: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Object,
      default: () => {}
    }
  },

  methods: {
    getWrapStyle() {
      let result = {};

      result.backgroundSize = `100% 100%`;
      return {
        ...this.$cmpStyle(this.styles),
        ...result
      };
    },
    // 主天气样式
    titleStyle() {
      return {
        color: this.styles.titleColor,
        fontSize: this.$unit(this.styles.titleSize),
        fontWeight: this.styles.tilteWeight
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  .title-left-model {
    display: flex;
    align-items: flex-end;
    padding-left: 10px;
    padding-right: 10px;
  }

  .title-mid-model {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
